<template>
	<view class="content">
    <view class="top-block" style="height: 80px;">
      <view class="search-block">
        <u-search placeholder="请输入申请人" v-model="params.applicant" action-text="筛选" :action-style="{color: '#3F99F7', fontWeight: '500'}" @custom="openPopup" @search="searchSubmit()"></u-search>
      </view>
      <view class="check-block">
        <view class="check-item">作业时间：{{params.startTime ? params.startTime : '---'}} 至 {{params.endTime ? params.endTime : '---'}}</view>
      </view>
    </view>
    <view class="body-block">
      <view class="sidebar">
        <scroll-view scroll-y="true" class="scroll-Y" :style="'height: '+ (pageHeight - 80) +'px;'">
          <sidebar @selectheader="selectheader" />
        </scroll-view>
      </view>
      <view class="container" v-if="todoList.length != 0">
        <scroll-view scroll-y="true" class="scroll-Y" :style="'height: '+ (pageHeight - 80) +'px;'" :scroll-top="scrollTop">
          <view v-for="(item,index) in todoList" :key='index' class="work">
            <view class="title">作业票类型：{{item.type|type}}</view>
            <view class="info-block">
              <view class="name">名称：</view>
              <view class="info">{{item.name ? item.name : '-'}}</view>
            </view>
            <view class="info-block">
            <view class="name">编码：</view>
            <view class="info">{{item.number ? item.number : '-'}}</view>
            </view>
            <view class="info-block">
            <view class="name">申请人：</view>
            <view class="info">{{item.applicant ? item.applicant : '-'}}</view>
            </view>
            <view class="info-block">
            <view class="name">创建时间：</view>
            <view class="info">{{item.createTime ? item.createTime : '-'}}</view>
            </view>
            <view class="btn">
              <view class="btnContainer" v-if="status==1">
                <u-button size="small" type="success" shape="circle" :hairline="true" :plain="true" text="修改"
                  @click="edit(item.type,item.id)"></u-button>
              </view>
              <view class="btnContainer" v-if="status==1">
                <u-button size="small" type="primary" shape="circle" :plain="true" text="提交审核"
                  @click="submit(item)">
                </u-button>
              </view>
              <view class="btnContainer" v-if="status==3">
                <u-button size="small" type="success" shape="circle" :hairline="true" :plain="true" text="追加"
                  @click="append(item.type,item.id)"></u-button>
              </view>
              <view class="btnContainer" v-if="status==2|| status == 3 ||status == 4 ">
                <u-button size="small" type="success" shape="circle" :hairline="true" :plain="true" text="查看"
                  @click="viewWork(item.type,item.id)"></u-button>
              </view>
              <view class="btnContainer" v-if="status==3">
                <u-button size="small" type="primary" shape="circle" :plain="true" text="导出PDF" @click="out(item.id)">
                </u-button>
              </view>
            </view>
          </view>
          <u-loadmore :status="moreStatus" :loading-text="loadingText" :loadmore-text="loadmoreText"
            :nomore-text="nomoreText" @loadmore="loadmore" />
        </scroll-view>
      </view>
      <!-- 无数据时显示的内容 -->
      <view v-else class="empty">
        <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
        </u-empty>
      </view>
    </view>
    <u-popup :show="popupState" mode="top" :closeOnClickOverlay="true" @close="closePopup">
      <view class="popup-block" style="padding: 20rpx;">
        <view class="popup-item" style="padding: 20rpx 0; border-bottom: 1rpx solid #CCCCCC;">
          <view class="item-label">作业开始时间</view>
          <view class="item-select" @click="() => calendarStartState = true">
            <text v-if="params.startTime" style="margin-right: 10rpx;">{{params.startTime ? params.startTime : '---'}}</text>
            <text v-else class="item-default-text" style="margin-right: 10rpx;">请选择作业开始时间</text>
            <u-icon name="calendar" size="46rpx" color="#3F99F7"></u-icon>
          </view>
        </view>
        <view class="popup-item" style="padding: 20rpx 0; border-bottom: 1rpx solid #CCCCCC;">
          <view class="item-label">作业结束时间</view>
          <view class="item-select" @click="() => calendarEndState = true">
            <text v-if="params.endTime" style="margin-right: 10rpx;">{{params.endTime ? params.endTime : '---'}}</text>
            <text v-else class="item-default-text" style="margin-right: 10rpx;">请选择作业结束时间</text>
            <u-icon name="calendar" size="46rpx" color="#3F99F7"></u-icon>
          </view>
        </view>
        <view class="button-block" style="padding-top: 20rpx;">
          <u-button type="info" text="重置" :custom-style="{width: '340rpx', backgroundColor: '#FFFFFF !important'}" @click="resetForm()"></u-button>
          <u-button type="primary" text="确认" :custom-style="{width: '340rpx'}" @click="searchSubmit()"></u-button>
        </view>
      </view>
    </u-popup>
    <u-datetime-picker :show="calendarStartState" v-model="startTime" mode="datetime" @confirm="dateConfirm('startTime', $event)" @cancel="() => calendarStartState = false"></u-datetime-picker>
    <u-datetime-picker :show="calendarEndState" v-model="endTime" mode="datetime" @confirm="dateConfirm('endTime', $event)" @cancel="() => calendarEndState = false"></u-datetime-picker>
    <!-- <u-calendar :show="calendarState" mode="range" color="#3F99F7" :closeOnClickOverlay="true" @confirm="calendarConfirm" @close="calendarClose"></u-calendar> -->
		<!-- 提示信息 -->
		<u-toast ref="uToast" type="success" message="提交成功"></u-toast>
	</view>
</template>

<script>
	import {
		getTask,
		submit
	} from '@/api/workTicket/index.js'
	import sidebar from "../components/sidebar/index.vue";
  import dayjs from 'dayjs'
	export default {
		components: {
			sidebar
		},
		filters: {
			type(flag) {
				let name = ''
				switch (flag) {
					case 1:
						name = '动火'
						break;
					case 2:
						name = '受限空间'
						break;
					case 3:
						name = '盲板抽堵'
						break;
					case 4:
						name = '高处'
						break;
					case 5:
						name = '吊装'
						break;
					case 6:
						name = '临时用电'
						break;
					case 7:
						name = '动土'
						break;
					case 8:
						name = '断路'
						break;

				}
				return name;
			}
		},
		data() {
			return {
        pageWidth: uni.getSystemInfoSync().windowWidth,
        pageHeight: uni.getSystemInfoSync().windowHeight,
        scrollTop: 0,
				moreStatus: 'loadmore',
				loadingText: '努力加载中',
				loadmoreText: '点击加载更多',
				nomoreText: '没有更多了',
				todoList: [],
        page: 1,
        size: 10,
        total: 0,
        status: '',
        params: {
          applicant: '',
          startTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
          endTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
        },
        startTime: '',
        endTime: '',
        popupState: false,
        calendarStartState: false,
        calendarEndState: false
			}
		},
		mounted() {
			this.selectheader()
		},
		methods: {
      dateConfirm: function(type, event) {
        this.params[type] = dayjs(event.value).format('YYYY-MM-DD HH:mm:ss')
        this.calendarStartState = false
        this.calendarEndState = false
      },
      openPopup: function() {
        this.popupState = true
      },
      closePopup: function() {
        this.popupState = false
      },
      resetForm: function() {
        this.params = {
          applicant: '',
          startTime: '',
          endTime: ''
        }
        thiis.searchSubmit()
      },
      // calendarConfirm: function(event) {
      //   this.params.startTime = event[0]
      //   this.params.endTime = event[event.length - 1]
      //   this.calendarState = false
      // },
      // calendarClose: function() {
      //   this.calendarState = false
      // },
			// 查询
			selectheader(item) {
				this.status = item ? item.value : 1
				this.page = 1
				getTask(Object.assign(this.params, { status: this.status, pageNo: this.page, pageSize: this.size })).then(res => {
					this.todoList = res.list
					this.total = res.total
					console.log(this.total, this.todoList.length)
					if (this.todoList.length == this.total) {
						this.moreStatus = 'nomore'
					} else {
						this.moreStatus = 'loadmore'
					}
				})
			},
			// 加载更多
			loadmore() {
				this.page++;
				getTask(Object.assign(this.params, { status: this.status, pageNo: this.page, pageSize: this.size })).then(res => {
					this.todoList = this.todoList.concat(res.list)
				})
				if (this.todoList.length == this.total) {
					this.moreStatus = 'nomore'
				} else {
					this.moreStatus = 'loadmore'
				}
			},
      searchSubmit: function() {
				this.page = 1
				getTask(Object.assign(this.params, { status: this.status, pageNo: this.page, pageSize: this.size })).then(res => {
					this.todoList = res.list
					this.total = res.total
          this.popupState = false
					if (this.todoList.length == this.total) {
						this.moreStatus = 'nomore'
					} else {
						this.moreStatus = 'loadmore'
					}
				})
      },
			// 修改
			edit(type, id) {
				switch (type) {
					case 1:
						uni.navigateTo({
							url: `/work/addHotWork?operation=1&id=${id}`,
						});
						break;
					case 2:
						uni.navigateTo({
							url: `/work/limitedSpace/index?operation=1&id=${id}`,
						});
						break;
					case 3:
						uni.navigateTo({
							url: `/work/high/index?operation=1&id=${id}`
						});
						break;
					case 4:
						uni.navigateTo({
							url: `/work/lifting/index?operation=1&id=${id}`,
						});
						break;
					case 5:
						uni.navigateTo({
							url: `/work/temporaryElectricity/index?operation=1&id=${id}`,
						});
						break;
					case 6:
						uni.navigateTo({
							url: `/work/blindPlate/index?operation=1&id=${id}`,
						});
						break;
					case 7:
						uni.navigateTo({
							url: `work/digging/index?operation=1&id=${id}`,
						});
						break;
					case 8:
						uni.navigateTo({
							url: `/work/circuit/index?operation=1&id=${id}`,
						});
						break;
				}

			},

			// 查看
			viewWork(type, id) {
				console.log(type, id)
				switch (type) {
					case 1:
						uni.navigateTo({
							url: `/work/addHotWork?operation=2&id=${id}`,
						});
						break;
					case 2:
						uni.navigateTo({
							url: `/work/limitedSpace/index?operation=2&id=${id}`,
						});
						break;
					case 3:
						uni.navigateTo({
							url: `/work/high/index?operation=2&id=${id}`,
						});
						break;
					case 4:
						uni.navigateTo({
							url: `/work/lifting/index?operation=2&id=${id}`
						});
						break;
					case 5:
						uni.navigateTo({
							url: `/work/temporaryElectricity/index?operation=2&id=${id}`,
						});
						break;
					case 6:
						uni.navigateTo({
							url: `/work/blindPlate/index?operation=2&id=${id}`,
						});
						break;
					case 7:
						uni.navigateTo({
							url: `/work/digging/index?operation=2&id=${id}`,
						});
						break;
					case 8:
						uni.navigateTo({
							url: `/work/circuit/index?operation=2&id=${id}`,
						});
						break;
				}
			},
			// 追加
			append(type, id) {
				switch (type) {
					case 1:
						uni.navigateTo({
							url: `/work/addHotWork?operation=3&id=${id}`,
						});
						break;
					case 2:
						uni.navigateTo({
							url: `/work/limitedSpace/index?operation=3&id=${id}`,
						});
						break;
					case 3:
						uni.navigateTo({
							url: `/work/high/index?operation=3&id=${id}`,
						});
						break;
					case 4:
						uni.navigateTo({
							url: `/work/lifting/index?operation=3&id=${id}`,
						});
						break;
					case 5:
						uni.navigateTo({
							url: `/work/temporaryElectricity/index?operation=3&id=${id}`,
						});
						break;
					case 6:
						uni.navigateTo({
							url: `/pages/work/blindPlate/index?operation=3&id=${id}`,
						});
						break;
					case 7:
						uni.navigateTo({
							url: `/work/digging/index?operation=3&id=${id}`,
						});
						break;
					case 8:
						uni.navigateTo({
							url: `/work/circuit/index?operation=3&id=${id}`,
						});
						break;
				}
			},
			// 导出
			out(id) {
        uni.navigateTo({ url: `/pagesCommon/webviewPDF?id=${id}` })
			},
			// 提交审核
			submit(item) {
				let params = {
					licenceId: item.id,
				}
				let obj = {
					type: 'success',
					message: "提交成功",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/jump.png'
				}
				submit(params).then(res => {
					if (res.code == 0) {
						this.showToast(obj)
						this.selectheader()
					}
					console.log(res)
				})
			},
			// 显示toast
			showToast(params) {
				this.$refs.uToast.show({
					...params,
					complete() {
						params.url && uni.navigateTo({
							url: params.url
						})
					}
				})
			},
		}
	}
</script>

<style>
  .u-button {
    background-color: #3F99F7 !important;
  }
</style>

<style scoped lang="scss">
	.content {
    .body-block {
      display: flex;
      flex-direction: row;
    }
	}
  
  .top-block {
    width: 100%;
    padding: 20rpx;
    background-color: #FFFFFF;
    overflow: hidden;
    z-index: 11111;
    border-bottom-left-radius: 20rpx;
    border-bottom-right-radius: 20rpx;
    box-shadow: 0 0 10rpx 0 #F4F4F4;
    .check-block {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 20rpx;
      .check-item {
        font-size: 24rpx;
        line-height: 32rpx;
        color: #3F99F7;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

	.sidebar {
		width: 30%;
    box-shadow: 0 0 10rpx 0 #CCCCCC;
	}

	.container {
		width: 70%;
    padding: 10rpx;
    background-color: #F4F4F4;
	}
  
  .info-block {
    display: flex;
    align-items: center;
  }

	.work {
		// width: 100%;
		// padding-left: 20rpx;
    padding: 20rpx;
    border-radius: 10rpx;
    box-shadow: 0 0 10rpx 0 #CCCCCC;
    background-color: #FFFFFF;
    margin-bottom: 20rpx;
	}
  .work:last-child {
    margin-bottom: 0;
  }

	.title {
		width: 100%;
		font-size: 32rpx;
		height: 5vh;
		line-height: 5vh;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    align-items: center;
	}

	.name {
		// width: 100%;
    font-size: 30rpx;
		height: 4vh;
		line-height: 4vh;
    color: #333333;
	}

	.info {
    font-size: 28rpx;
    line-height: 40rpx;
		color: #595757;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	}

	.btn {
		display: flex;
		justify-content: flex-end;
    align-items: center;

		// ::v-deep .u-button__text{
		// 	color: red;
		// }
		.btnContainer {
			// width: 25%;
      margin-left: 10rpx;
		}
    .btnContainer:first-child {
      margin-left: 0;
    }

		::v-deep .u-button--success {
			color: #5ac725 !important;
			background-color: rgba(255, 255, 255, 0) !important;
		}

		::v-deep.u-button--primary {
			color: white !important;
		}
	}
    .popup-block {
      .popup-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .item-label {
          font-size: 28rpx;
          line-height: 40rpx;
          color: #333333;
        }
        .item-select {
          display: flex;
          align-items: center;
          font-size: 28rpx;
          line-height: 40rpx;
          color: #333333;
          .item-default-text {
            color: #999999;
          }
        }
      }
      .button-block {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }

	.empty {
		width: 70%;
	}
</style>
